<template>
  <!-- 顶部导航栏 -->
  <div class="detail">
    <van-sticky>
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <div slot="right">
          <van-icon name="more-o" size="20px" color="#999"/>
          <van-popover
            v-model="showPopover"
            trigger="click"
            theme="dark"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
          >
          </van-popover>
        </div>
      </van-nav-bar>
    </van-sticky>

    <!-- 轮播 -->
    <van-swipe @change="onChange" class="banner">
      <van-swipe-item><img src="../../img/1.jpg" ></van-swipe-item>
      <van-swipe-item><img src="../../img/1200.jpg" ></van-swipe-item>
      <van-swipe-item><img src="../../img/1201.jpg" ></van-swipe-item>
      <van-swipe-item><img src="../../img/1202.jpg" ></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>

    <!-- 商品信息 -->
    <div class="info">
      <!-- 商品价格 -->
      <div class="desc">
        <div>
          <span>￥</span>
          <span class="price">128</span>
          <span>.00</span>
        </div>
        <div class="collect">
          <van-icon name="like-o" />
          <div>收藏</div>
        </div>
      </div>

      <!-- 标题 -->
      <div>
        <h3>香港美心月饼 月饼礼盒 中秋节礼品 团购送礼 团圆中秋610g（9饼9味）</h3>
      </div>
    </div>

    <div class="discountGap">
      <div>
        <div class="discount" @click="showPopup">
          <div style="display: flex;">
            <span>优惠</span>
            <div>
              <div style="margin-bottom: 10px;">
                <span class="gift">赠品</span>
                <span>购买立享1件赠品(赠完即止)</span>
              </div>
              <div>
                <span class="gift">换购</span>
                <span>购买1件可优惠换购热销商品</span>
              </div>
            </div>
          </div>
          <van-icon name="more-o" />
        </div>
        <div class="discount">
          <div style="display: flex;">
            <span>分期</span>
            <span class="text">6期内息费八折</span>
          </div>
          <van-icon name="more-o" />
        </div>
      </div>
      <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '50%' }"
      >
      <div>
        <h4 style="text-align: center;">优惠</h4>
        <span style="margin-left: 10px;">促销</span>
        <div>
          <div style="margin-bottom: 20px;">
            <span class="gift">赠品</span>
            <span>购买立享1件赠品(赠完即止)</span>
          </div>
          <div>
            <span class="gift">换购</span>
            <span>购买1件可优惠换购热销商品</span>
          </div>
        </div>
      </div>
      </van-popup>
    </div>

    <!-- 商品规格 -->
    <div class="goodsSpecifi">
      <van-cell title="已选" is-link @click="goodsBase"/>
        <van-sku
          v-model="showBase"
          :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
            :message-config="messageConfig"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
        />

      <van-cell is-link @click="address">
        <div slot="title">
          <span>送至 </span>
          <span> {{showAddr}}</span>
        </div>
      </van-cell>
          <van-popup v-model="addrshow" position="bottom">
            <van-area
              title="配送至"
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              value="110000"
              @change="changeAddr"
              @confirm="onAddrConfirm"
              @cancel="onAddrCancel"
            />
          </van-popup>


      <van-cell>
        <div slot="title">运费</div>
        <span>在线支付免运费</span>
      </van-cell>

    </div>

    <van-tabs @click="onClick">
      <van-tab title="商品">商品</van-tab>
      <van-tab title="评价">评价</van-tab>
      <van-tab title="详情">详情</van-tab>
      <van-tab title="推荐">推荐</van-tab>
    </van-tabs>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 底部商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
  import { areaList } from '@vant/area-data';
  export default {
    name:'Detail',
    data() {
      return {
        areaList,
        current: 0,
        showPopover:false,
        addrshow:false,
        show: false,
        showBase:false,
        shows:false,
        resAddr:'',
        showAddr:'',
        actions: [
                    { text: '首页' ,icon: 'wap-home-o'},
                    { text: '分类' ,icon: 'description'},
                    { text: '我的' ,icon: 'contact'},
                 ],
        sku: {
            tree: [
              {
                k: '颜色', // skuKeyName：规格类目名称
                k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                v: [
                  {
                    id: '1', // skuValueId：规格值 id
                    name: '红色', // skuValueName：规格值名称
                    imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                    previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg', // 用于预览显示的规格类目图片
                  },
                  {
                    id: '1',
                    name: '蓝色',
                    imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                    previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
                  }
                ],
                largeImageMode: true, //  是否展示大图模式
              }
            ],
            // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
            list: [
              {
                id: 2259, // skuId
                s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                price: 100, // 价格（单位分）
                stock_num: 110 // 当前 sku 组合对应的库存
              }
            ],
            price: '1.00', // 默认价格（单位元）
            stock_num: 227, // 商品总库存
            collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
            none_sku: false, // 是否无规格商品
            hide_stock: false // 是否隐藏剩余库存
        },
        goods: {
          picture: 'https://img01.yzcdn.cn/1.jpg'
        },
        messageConfig: {

        },
      }
    },

    created() {
      console.log(this.$route.params.id)
    },
    methods: {
      // 返回
      onClickLeft() {
        this.$router.go(-1)
      },
      // 顶部导航右侧
      onClickRight() {
        this.showPopover = true
      },

      // 点击标签
      onClick() {

      },

      onChange(index) {
        this.current = index;
      },
      showPopup() {
        this.show = true;
      },

      // 立即购买
      onBuyClicked() {

      },

      // 加入购物车
      onAddCartClicked() {

      },
      // 商品规格
      goodsBase() {
        this.showBase = true
      },

      // 选择地址
      address() {
        this.addrshow = true
      },

      changeAddr(picker) {
        let val = picker.getValues()
        this.resAddr = val
      },

      // 确认选择地址
      onAddrConfirm() {
        this.addrshow = false
        this.showAddr = this.resAddr[0].name+'-'+this.resAddr[1].name+'-'+this.resAddr[2].name
      },

      // 取消选择地址
      onAddrCancel() {  //取消选择
        this.addrshow = false
      },

      onSelect(action,index) {
        if(index == 0){
          this.$router.push('/home')
        }else if(index ==1){
          this.$router.push('/home/cate')
        }else if(index ==2){
          this.$router.push('/home/user')
        }
      },
    },
  };
</script>

<style>
   .detail{
     background-color: #f5f5f5;
   }
   .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #FFFFFF;
      background: rgba(0, 0, 0, 0.1);
    }
    .banner img{
      width: 100%;
    }

    .info{
      background-color: #FFFFFF;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 0 0 20px 20px;
    }
    .info h3{
      font-size: 30px;
    }
    .desc{
      display: flex;
      justify-content: space-between;
      height: 80px;
      color: #f2270c;
      align-items: center;

    }
    .desc span{
      font-size: 30px;
    }
    .desc .price{
      font-size: 50px;
    }
    .collect{
      text-align: center;
      color: #262626;

    }
    .collect .van-icon{
      font-size: 30px;
    }

    .discountGap{
      padding: 20px;
      background-color: #FFFFFF;
      margin-top: 30px;
      font-size: 30px;
      border-radius: 20px;
    }
    .discount{
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      margin-top: 20px;
    }
    .discount .text{
      margin-left: 20px;

    }
    .gift{
      border: #ff0000 1px solid;
      color: #FF0000;
      font-size: 24px;
      margin: 0 10px 0 20px;
    }

    .goodsSpecifi .van-cell {

        padding: 0.53333rem 0.55333rem;

    }

    .goodsSpecifi{
      margin-top: 30px;
    }
</style>
